<template>
  <div style="padding-right: 12px; padding-left: 12px">
    <el-button type="text" v-on:click="cancelPage">
      <el-icon style="cursor: pointer"><DArrowLeft /></el-icon>
      {{htmlBtnBack}}
    </el-button>
    <div style="margin-top: 18px">
      <div style="text-align: center; line-height: 30px; font-weight: bold">{{weird.title}}</div>
      <div>
        <div v-html="weird.content"></div>
      </div>
    </div>

    <div style="margin-top: 30px;">
      <el-divider content-position="left">{{ htmlComment }}</el-divider>

      <div v-for="item in commentList" style="margin-bottom: 8px">
        <el-card style="width: 100%">
          <div slot="header" class="clearfix">
            <span>{{ item.username }}({{ item.create_time }})</span>
            <span style="float: right; padding: 3px 0; cursor: pointer" v-on:click="addCommentFavour(item)">
              <i class="iconfont icon-zan" style="cursor: pointer;"></i> ({{item.favour_number}})
            </span>
          </div>
          <div class="text item">
            {{ item.comment }}
          </div>
        </el-card>
      </div>
    </div>

    <div style="margin-top: 10px; margin-bottom: 120px;">
      <div v-if="isMore"><span style="cursor: pointer" v-on:click="loadComment(false)">{{ htmlTextMore }}&gt;&gt;</span> </div>
      <el-divider v-else>{{ htmlTextNoMore }}</el-divider>
    </div>

    <el-row style="position: fixed; bottom: 10px; width: 410px">
      <el-card style="text-align: center; width: 100%">
        <el-badge :value="weird.comment_number" class="item" v-if="weird.comment_number > 0">
          <el-button type="success" circle>
            <el-icon><ChatDotSquare @click="showComment" /></el-icon>
          </el-button>
        </el-badge>
        <el-button type="success" circle v-else>
          <el-icon><ChatDotSquare @click="showComment" /></el-icon>
        </el-button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-badge :value="weird.favour_number" class="item" v-if="weird.favour_number > 0">
          <el-button type="primary" circle @click="addFavour">
            <i class="iconfont icon-zan" style="cursor: pointer;"></i>
          </el-button>
        </el-badge>
        <el-button type="primary" circle v-else @click="addFavour">
          <i class="iconfont icon-zan" style="cursor: pointer;"></i>
        </el-button>
      </el-card>
    </el-row>

    <comment ref="refWeirdComment" @confirm="confirmComment" />
  </div>
</template>

<script>
import {DArrowLeft, ChatDotSquare} from "@element-plus/icons-vue"
import WeirdService from "@/service/WeirdService"
import DefaultMessageHandler from "@/utils/DefaultMessageHandler"
import Comment from "@/components/common/Comment.vue"
import CommentService from "@/service/CommentService"

export default {
  name: 'WeirdDetail',
  components: {DArrowLeft, ChatDotSquare, Comment},
  props: {
    args: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      weird: {},
      commentList: [],
      page: 0,
      isMore: true,

      htmlBtnBack: chrome.i18n.getMessage("commonBtnBack"),
      htmlTextMore: chrome.i18n.getMessage("commonTextMore"),
      htmlTextNoMore: chrome.i18n.getMessage("commonTextNoMore"),
      htmlComment: chrome.i18n.getMessage("commonTextComment"),
    }
  },
  methods: {
    /**
     * 返回列表.
     */
    cancelPage() {
      this.$emit('goPage', 'weird', {})
    },
    /**
     * 点赞.
     */
    addFavour() {
      WeirdService.addFavour(this.weird.id, (data) => {
        this.weird.favour_number = parseInt(this.weird.favour_number) + 1
      }, (fail) => {
        DefaultMessageHandler.warning(fail, this)
      })
    },
    /**
     * 显示评论.
     */
    showComment() {
      this.$refs.refWeirdComment.show()
    },
    /**
     * 评论确认.
     */
    confirmComment(comment) {
      console.log('confirm data: ', comment)
      WeirdService.addComment(this.weird.id, comment, (data) => {
        this.weird.comment_number = parseInt(this.weird.comment_number) + 1
        this.loadComment(true)
      }, (fail) => {
        DefaultMessageHandler.error(fail, this)
      })
    },
    /**
     * 加载评论.
     * @param reload
     */
    loadComment(reload) {
      if (reload) {
        this.page = 0
        this.commentList = []
        this.isMore = true
      }
      if (!this.isMore) {
        return
      } else {
        this.page++
      }


      WeirdService.getCommentList(this.weird.id, this.page, (data)=> {
        console.log('comment: ', data)
        if (data.length < 20) {
          this.isMore = false
        }
        data.forEach(item => {
          this.commentList.push(item)
        })
      }, (fail) => {
        DefaultMessageHandler.error(fail, this)
      })
    },
    /**
     * 评论点赞.
     * @param item
     */
    addCommentFavour(item) {
      CommentService.addFavour(item.id, (data) => {
        this.commentList.forEach((comment)=> {
          if (comment.id === item.id) {
            comment.favour_number = parseInt(comment.favour_number) + 1
          }
          return comment;
        })
      }, (fail) => {
        DefaultMessageHandler.warning(fail, this)
      })
    }
  },
  mounted() {
    console.log('weird-detail: ', this.args)
    this.weird = Object.assign({}, this.args)
    this.loadComment(true)
  }
}

</script>

<style scoped>

</style>